<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:composite="http://java.sun.com/jsf/composite">



    <!-- Componente -->
    <composite:interface>
        <composite:attribute name="loginBoxClass"/>
        <composite:attribute name="rowClass"/>
        <composite:attribute name="leftColumnClass"/>
        <composite:attribute name="rightColumnClass"/>
        <composite:attribute name="userNameLabel" />
        <composite:attribute name="passwordLabel" />
        <composite:attribute name="loginButtonLabel" />
        <composite:attribute name="usernameRequiredMessage" />
        <composite:attribute name="passwordRequiredMessage" />
        <composite:attribute name="showButtonText" />
    </composite:interface>
    <composite:implementation>
        <form id="frmLogin" method="post" action="#{request.contextPath}/j_spring_security_check" prependId="false">
            <div style="position: absolute; right: 30px;">
                <div class="showLoginButton">
                    <button id="btnShowLogin" class="btn-primary" type="button" >Logar</button>
                </div>
                <div id="loginBox" style="display: none;">
                    <table>
                        <tbody>
                            <tr>
                                <td>#{cc.attrs.userNameLabel}</td>
                                <td>
                                    <input type="text" name="j_username" id="j_username" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    #{cc.attrs.passwordLabel}
                                </td>
                                <td>
                                    <input type="password" name="j_password" id="j_password" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <span class="errorRow">
                                        #{SPRING_SECURITY_LAST_EXCEPTION.message}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <h:commandButton value="#{cc.attrs.loginButtonLabel}" class="btn-primary"
                                                     action="#{usuarioBean.logar}"/>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </form>
        <script type="text/javascript">
            $(function(){
                $('#btnShowLogin').click(function(e){
                    $('#j_username').val('');
                    $('#j_password').val('');
                    $('#loginBox').lightbox_me({
                        centered: true,
                        onLoad: function(){
                            $('#login').find('input:first').focus()
                        },
                        closeClick: true,
                        closeSelector: '#btnSumbit'
                    });
                        
                    // Impedindo a propagação do evento
                    e.preventDefault();
                });
            });
        </script>
        <style type="text/css"> 
            #loginBox
            {
                -moz-border-radius: 6px;
                background: #eef2f7;
                -webkit-border-radius: 6px;
                border: 1px solid #536376;
                -webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
                -moz-box-shadow:  rgba(0,0,0,.6) 0px 2px 12px;;
                padding: 14px 22px;
                width: 400px;
                position: relative;
                display: none;
            }
            .errorRow
            {
                display: #{usuarioBean.showErrorRow(param.authError == true)};
            }
        </style>
    </composite:implementation>

</html>

